<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form :model="dateForm" layout="inline" size="small">
            <a-form-item label="记录单号" :style="{ width: '270px' }" label-col-flex="70px">
              <a-input class="bacClass" v-model="dateForm.recordCode" allow-clear></a-input>
            </a-form-item>
            <a-form-item label="开单日期" :style="{ width: '270px' }" label-col-flex="70px">
              <a-date-picker  popup-container="html" 
                class="bacClass"
                v-model="dateForm.beginDate"
                allow-clear
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="至" :style="{ width: '270px' }" label-col-flex="70px">
              <a-date-picker  popup-container="html" 
                class="bacClass"
                v-model="dateForm.endDate"
                allow-clear
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="流转卡号">
              <a-input class="bacClass" v-model="dateForm.userName" allow-clear></a-input>
            </a-form-item>
            <CorporateSectorCascader
              :configCascader="configCascaderss"
              @changeCascader="changeCascader"
            />
            <a-form-item label="布号" :style="{ width: '270px' }" label-col-flex="70px">
              <a-input class="bacClass" v-model="dateForm.machineCode" allow-clear></a-input>
            </a-form-item>
            <a-form-item label="品名" :style="{ width: '270px' }" label-col-flex="70px">
              <a-input class="bacClass" v-model="dateForm.userCode" allow-clear></a-input>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="search-form divClass" v-if="headerShow" style="float: right">
        <Toolbar
          :items="toolbarList"
          @add="addHandler"
          @select="selectHandler"
          @del="deleteHandler"
          @export="exports"
        >
        </Toolbar>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true" :default-active-key="tabsKeys" @change="tabsChanges">
                <a-tab-pane> -->
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: calc(100% - 45px);"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="pageData.dataListOP"
        :columnDefs="tc"
        :localeText="localeText1"
      >
      </AgGridVuesCopys>
      <paginationCopys
        :page-size-options="pagingList1"
        :total="total"
        show-total
        show-jumper
        show-page-size
        @change="PageSize"
        @page-size-change="change"
        style="justify-content: center"
        :page-size="pagination.pageSize"
        :current="pagination.page"
      />
      <!-- </a-tab-pane>
            </a-tabs> -->
    </template>
    <a-drawer
      :drawer-style="{ zIndex: 9999 }"
      :mask-closable="false"
      height="70%"
      :visible="pageData.showAdd8"
      unmountOnClose
      @ok="sideOk"
      @cancel="pageData.showAdd8 = false"
      :width="400"
      cancel-text="关闭"
      ok-text="保存"
      placement="bottom"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <a-form :model="objectOP" layout="inline" size="small">
        <a-form-item label="记录单号" :style="{ width: '270px' }" label-col-flex="70px">
          <a-input class="bacClass" disabled v-model="objectOP.recordCode" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="开单日期" :style="{ width: '270px' }" label-col-flex="70px">
          <a-date-picker  popup-container="html" 
            class="bacClass"
            v-model="objectOP.recordDate"
            allow-clear
            style="width: 200px"
          />
        </a-form-item>
        <CorporateSectorCascader
          :style="{ width: '200px' }"
          :configCascader="configCascader"
          @changeCascader="changeCascader1"
        />
        <a-form-item label="所属车间" :style="{ width: '270px' }" label-col-flex="70px">
          <a-select popup-container="html" 
            class="bacClass"
            :loading="loading"
            :allowClear="true"
            @search="handleSearch"
            v-model="objectOP.workshop"
            :filter-option="false"
            allow-search
            @focus="focusSel"
          >
            <a-option v-for="item in pageData.nameList" :value="item['id']">{{
              item['warehouseName']
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="流转卡号" :style="{ width: '270px' }" label-col-flex="70px">
          <a-select popup-container="html" 
            class="bacClass"
            :loading="loading"
            :allowClear="true"
            @search="handleSearch1"
            v-model="objectOP.circulatCard"
            :filter-option="false"
            allow-search
            @focus="focusSel1"
            @change="changeLZ"
          >
            <a-option v-for="item in pageData.nameList1" :value="item['circulatCard']">{{
              item['circulatCard']
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="布号" :style="{ width: '270px' }" label-col-flex="70px">
          <a-input class="bacClass" disabled v-model="objectOP.clothCode" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="品名" :style="{ width: '270px' }" label-col-flex="70px">
          <a-input class="bacClass" disabled v-model="objectOP.brandName" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="回修原因" :style="{ width: '270px' }" label-col-flex="70px">
          <a-input class="bacClass" v-model="objectOP.returnCause" allow-clear></a-input>
        </a-form-item>
      </a-form>
      <div style="height: 100%">
        <a-table
          stripe
          :bordered="{ wrapper: true, cell: true }"
          :columns="tableColumns2"
          :loading="table.tableLoading"
          :data="pageData.cfList2"
          :rowKey="rowKey"
          size="mini"
        >
          <template #del="{ record }">
            <icon-delete
              v-if="record.jockeyUserCode != ''"
              style="font-size: 30px; cursor: pointer; color: red"
              @click="delRow2(record)"
            />
          </template>
          <template #jockeyUserCode="{ record }">
            <div style="width: 100%">
              <a-select popup-container="html" 
                class="bacClass"
                :loading="loading"
                @search="handleSearch2_1"
                v-model="record.jockeyUserCode"
                :filter-option="false"
                allow-search
                allow-clear
                @focus="focusSel2_1"
                @change="changeCf2(record)"
              >
                <a-option v-for="item in pageData.nameList2_1" :value="item['code']">{{
                  item['code']
                }}</a-option>
              </a-select>
            </div>
          </template>
          <template #jockeyUserName="{ record }">
            <div style="width: 100%"
              ><a-input class="bacClass" disabled v-model="record.jockeyUserName" />
            </div>
          </template>
          <template #jockeyMoney="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" v-model="record.jockeyMoney" @change="change2_1(record)" />
            </div>
          </template>
          <template #workteam="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" v-model="record.workteam" />
            </div>
          </template>
          <template #headmanUserCode="{ record }">
            <div style="width: 100%">
              <a-select popup-container="html" 
                class="bacClass"
                :loading="loading"
                @search="handleSearch2_2"
                v-model="record.headmanUserCode"
                :filter-option="false"
                allow-search
                allow-clear
                @focus="focusSel2_2"
                @change="change2_2(record)"
              >
                <a-option v-for="item in pageData.nameList2_2" :value="item['code']">{{
                  item['code']
                }}</a-option>
              </a-select>
            </div>
          </template>
          <template #headmanUserName="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.headmanUserName" />
            </div>
          </template>
          <template #headmanCoefficient="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.headmanCoefficient" />
            </div>
          </template>
          <template #headmanMoney="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.headmanMoney" />
            </div>
          </template>

          <template #dyeworkerUserCode="{ record }">
            <div style="width: 100%">
              <a-select popup-container="html" 
                class="bacClass"
                :loading="loading"
                @search="handleSearch2_3"
                v-model="record.dyeworkerUserCode"
                :filter-option="false"
                allow-search
                allow-clear
                @focus="focusSel2_3"
                @change="change2_3(record)"
              >
                <a-option v-for="item in pageData.nameList2_3" :value="item['code']">{{
                  item['code']
                }}</a-option>
              </a-select>
            </div>
          </template>
          <template #dyeworkerUserName="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.dyeworkerUserName" />
            </div>
          </template>
          <template #dyeworkerCoefficient="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" v-model="record.dyeworkerCoefficient" />
            </div>
          </template>
          <template #dyeworkerMoney="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.dyeworkerMoney" />
            </div>
          </template>

          <template #foremanUserCode="{ record }">
            <div style="width: 100%">
              <a-select popup-container="html" 
                class="bacClass"
                :loading="loading"
                @search="handleSearch2_4"
                v-model="record.foremanUserCode"
                :filter-option="false"
                allow-search
                allow-clear
                @focus="focusSel2_4"
                @change="change2_4(record)"
              >
                <a-option v-for="item in pageData.nameList2_4" :value="item['code']">{{
                  item['code']
                }}</a-option>
              </a-select>
            </div>
          </template>
          <template #foremanUserName="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.foremanUserName" />
            </div>
          </template>
          <template #foremanCoefficient="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.foremanCoefficient" />
            </div>
          </template>
          <template #foremanMoney="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" disabled v-model="record.foremanMoney" />
            </div>
          </template>
          <template #remark="{ record }">
            <div style="width: 100%">
              <a-input class="bacClass" v-model="record.remark" />
            </div>
          </template>
        </a-table>
      </div>
      <!--   <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady1" style="height:83%;" :defaultColDef1="defaultColDef1"
                class='ag-theme-alpine' :rowData="tableDataList1" :columnDefs="dc" :localeText="localeText1"></AgGridVuesCopys>
            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change" style="justify-content: center"
                :page-size="pagination.pageSize" :current="pagination.page" /> -->
    </a-drawer>
  </pageTabelLayout>
</template>
<script setup lang="ts">
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'
  import { ref, reactive } from 'vue'
  import { post, get } from '@/api/http'
  import { localeText } from '@/api/aggridZw'
  
  import Toolbar from '@/components/Toolbar.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  import { FormInstance } from '@arco-design/web-vue/es/form'
  import { pagingList } from '@/api/paging'
  import { EXPORTEXEL, EXELTABLE } from '@/utils/exportEXCEL'
  import dayjs from 'dayjs'
  import axios from 'axios'
  import { AnyMxRecord } from 'dns'
  const toolbarList: any = ref(['查询', '新增', '删除', '导出'])
  let configCascader = ref<{}>({
    corporateWidth: '180px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '选择部门', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })

  let configCascaderss = ref<{}>({
    corporateWidth: '215px', //公司宽度
    sectorWidth: '215px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '部门', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
    corporateNameLabelWidth: '70px',
  })
  const changeCascader = (data: any) => {
    // const { corporateId } = data
    // whList.value = []
    // searchData.wh = ''
    // searchData.firm = corporateId
    // whService.getWarhouseList(corporateId, '原纱仓')
    dateForm.department = data.corporateLabel
  }
  const changeCascader1 = (data: any) => {
    // objectOP.returnDepartment = data.corporateLabel
  }
  function PageSize(val: any) {
    pagination.page = val
    doRefresh()
  }

  function change(val: any) {
    pagination.pageSize = val
    doRefresh()
  }
  const headerShow = ref(true)
  const tableDataList1: any = ref([])
  const tableDataList1_2: any = ref([])

  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const gridOption1 = ref()
  const gridReady1 = (params: any) => {
    gridOption1.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
  }
  const defaultColDef1 = {
    sortable: true,
    resizable: true,
    filter: true,
  }
  const localeText1: any = ref(localeText)
  const tc = [
    {
      showRowGroup: 'hide_def',
      headerName: '',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      pinned: 'left',
      width: 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: 'left',
    },
    {
      headerName: '记录单号',
      field: 'recordCode',
      width: 150,
      filter: 'recordCode',
    },
    {
      headerName: '流转卡号',
      field: 'circulatCard',
      width: 150,
    },
    {
      headerName: '客户名称',
      field: 'customName',
      width: 150,
    },
    {
      headerName: '客户订单号',
      field: 'customOrderCode',
      width: 150,
    },
    {
      headerName: '合约号',
      field: 'machineCode',
      width: 150,
    },
    {
      headerName: '布号',
      field: 'clothCode',
      width: 150,
    },
    {
      headerName: '品号',
      field: 'brandName',
      width: 150,
    },
    {
      headerName: '色号',
      field: 'colorCode',
      width: 150,
    },
    {
      headerName: '色称',
      field: 'colorName',
      width: 150,
    },
    {
      headerName: '坯布编号',
      field: 'greyCode',
      width: 150,
    },
    {
      headerName: '坯布名称',
      field: 'greyName',
      width: 150,
    },
    {
      headerName: '纱批',
      field: 'yarnBatch',
      width: 150,
    },

    {
      headerName: '客户要求',
      field: 'circulatCard',
      width: 300,
      children: [
        {
          headerName: '门幅',
          field: 'requireWidth',
          width: 150,
        },
        {
          headerName: '克重',
          field: 'requireWeight',
          width: 150,
        },
      ],
      cellStyle: { textAlign: 'center' },
      headerComponentParams: {
        style: { textAlign: 'center' },
      },
    },
    {
      headerName: '原',
      field: 'circulatCard',
      width: 300,
      children: [
        {
          headerName: '匹数',
          field: 'originalHorseNum',
          width: 150,
        },
        {
          headerName: '重量',
          field: 'originalWeight',
          width: 150,
        },
      ],
    },
    {
      headerName: '返工',
      field: 'circulatCard',
      width: 300,
      children: [
        {
          headerName: '匹数',
          field: 'abnormalHorseNum',
          width: 150,
        },
        {
          headerName: '重量',
          field: 'abnormalWeight',
          width: 150,
        },
      ],
    },
    {
      headerName: '责任部门',
      field: 'jobType',
      width: 150,
    },
    {
      headerName: '设备编号',
      field: 'machineCode',
      width: 150,
    },
    {
      headerName: '回修部门',
      field: 'repairDepartment',
      width: 150,
    },
    {
      headerName: '操作工',
      field: 'circulatCard',
      width: 450,
      children: [
        {
          headerName: '工号',
          field: 'jockeyUserCode',
          width: 150,
        },
        {
          headerName: '姓名',
          field: 'jockeyUserName',
          width: 150,
        },
        {
          headerName: '乐捐金额',
          field: 'jockeyMoney',
          width: 150,
        },
      ],
    },
    {
      headerName: '班次',
      field: 'workteam',
      width: 150,
    },
    {
      headerName: '组长',
      field: 'circulatCard',
      width: 600,
      children: [
        {
          headerName: '工号',
          field: 'headmanUserCode',
          width: 150,
        },
        {
          headerName: '姓名',
          field: 'headmanUserName',
          width: 150,
        },
        {
          headerName: '系数',
          field: 'headmanCoefficient',
          width: 150,
        },
        {
          headerName: '金额',
          field: 'headmanMoney',
          width: 150,
        },
      ],
    },
    {
      headerName: '染部师傅',
      field: 'circulatCard',
      width: 600,
      children: [
        {
          headerName: '工号',
          field: 'dyeworkerUserCode',
          width: 150,
        },
        {
          headerName: '姓名',
          field: 'dyeworkerUserName',
          width: 150,
        },
        {
          headerName: '系数',
          field: 'dyeworkerCoefficient',
          width: 150,
        },
        {
          headerName: '金额',
          field: 'dyeworkerMoney',
          width: 150,
        },
      ],
    },
    {
      headerName: '领班',
      field: 'circulatCard',
      width: 600,
      children: [
        {
          headerName: '工号',
          field: 'foremanUserCode',
          width: 150,
        },
        {
          headerName: '姓名',
          field: 'foremanUserName',
          width: 150,
        },
        {
          headerName: '系数',
          field: 'foremanCoefficient',
          width: 150,
        },
        {
          headerName: '金额',
          field: 'foremanMoney',
          width: 150,
        },
      ],
    },
    {
      headerName: '备注',
      field: 'remark',
      width: 150,
    },
    {
      headerName: '创建人',
      field: 'createName',
      width: 150,
    },
    {
      headerName: '创建时间',
      field: 'createTime',
      width: 150,
    },
    {
      headerName: '最后修改人',
      field: 'updateName',
      width: 150,
    },
    {
      headerName: '最后修改时间',
      field: 'updateTime',
      width: 150,
    },
    {
      headerName: '操作',
      field: 'id',
      pinned: 'right',
      width: 150,
      cellRenderer: {
        template: `
            <el-button style="color:#165dff;" @click="a" class="gesture" link>修改</el-button>
            `,
        setup(props: any) {
          const a = () => {
            editHandler(props.params.data)
          }
          return {
            a,
          }
        },
      },
    },
  ]
  const rowKey = useRowKey('id')
  const tableColumns2 = useTableColumn([
    {
      title: '操作',
      key: 'del',
      dataIndex: 'del',
      slotName: 'del',
      width: 150,
    },
    {
      title: '操作工工号',
      key: 'jockeyUserCode',
      dataIndex: 'jockeyUserCode',
      slotName: 'jockeyUserCode',
      width: 150,
    },
    {
      title: '操作工姓名',
      key: 'jockeyUserName',
      dataIndex: 'jockeyUserName',
      slotName: 'jockeyUserName',
      width: 150,
    },
    {
      title: '操作工乐捐金额',
      key: 'jockeyMoney',
      dataIndex: 'jockeyMoney',
      slotName: 'jockeyMoney',
      width: 150,
    },
    {
      title: '班次',
      key: 'workteam',
      dataIndex: 'workteam',
      slotName: 'workteam',
      width: 150,
    },
    {
      title: '组长工号',
      key: 'headmanUserCode',
      dataIndex: 'headmanUserCode',
      slotName: 'headmanUserCode',
      width: 150,
    },
    {
      title: '组长姓名',
      key: 'headmanUserName',
      dataIndex: 'headmanUserName',
      slotName: 'headmanUserName',
      width: 150,
    },
    {
      title: '组长系数',
      key: 'headmanCoefficient',
      dataIndex: 'headmanCoefficient',
      slotName: 'headmanCoefficient',
      width: 150,
    },
    {
      title: '组长乐捐金额',
      key: 'headmanMoney',
      dataIndex: 'headmanMoney',
      slotName: 'headmanMoney',
      width: 150,
    },
    {
      title: '染部师傅工号',
      key: 'dyeworkerUserCode',
      dataIndex: 'dyeworkerUserCode',
      slotName: 'dyeworkerUserCode',
      width: 150,
    },
    {
      title: '染部师傅姓名',
      key: 'dyeworkerUserName',
      dataIndex: 'dyeworkerUserName',
      slotName: 'dyeworkerUserName',
      width: 150,
    },
    {
      title: '染部师傅系数',
      key: 'dyeworkerCoefficient',
      dataIndex: 'dyeworkerCoefficient',
      slotName: 'dyeworkerCoefficient',
      width: 150,
    },
    {
      title: '染部师傅乐捐金额',
      key: 'dyeworkerMoney',
      dataIndex: 'dyeworkerMoney',
      slotName: 'dyeworkerMoney',
      width: 150,
    },
    {
      title: '领班工号',
      key: 'foremanUserCode',
      dataIndex: 'foremanUserCode',
      slotName: 'foremanUserCode',
      width: 150,
    },
    {
      title: '领班姓名',
      key: 'foremanUserName',
      dataIndex: 'foremanUserName',
      slotName: 'foremanUserName',
      width: 150,
    },
    {
      title: '领班系数',
      key: 'foremanCoefficient',
      dataIndex: 'foremanCoefficient',
      slotName: 'foremanCoefficient',
      width: 150,
    },
    {
      title: '领班乐捐金额',
      key: 'foremanMoney',
      dataIndex: 'foremanMoney',
      slotName: 'foremanMoney',
      width: 150,
    },
    {
      title: '备注',
      key: 'remark',
      dataIndex: 'remark',
      slotName: 'remark',
      width: 150,
    },
  ])

  const objectOP = reactive<{
    recordCode: any
    recordDate: any
    workshop: any
    circulatCard: any
    clothCode: any
    brandName: any
    returnCause: any
    VerifyDonationDetail: any[]
  }>({
    recordCode: '',
    recordDate: '',
    workshop: '',
    circulatCard: '',
    clothCode: '',
    brandName: '',
    returnCause: '',
    VerifyDonationDetail: [],
  })
  const dateForm = reactive<{
    id: any
    recordCode: any
    beginDate: any
    endDate: any
    department: any
    workteam: any
    machineCode: any
    userCode: any
    userName: any
    page: any
    size: any
    deleteState: any
  }>({
    id: null,
    recordCode: '',
    beginDate: '',
    endDate: '',
    department: '',
    workteam: '',
    machineCode: '',
    userCode: '',
    userName: '',
    page: 1,
    size: 10,
    deleteState: 0,
  })
  const pageData = reactive<{
    sideTitle: string
    showAdd8: boolean
    pageLoading: boolean
    total: any
    dataList: any[]
    cfList2: any[]
    nameList: any[]
    nameList1: any[]
    nameList2_1: any[]
    nameList2_2: any[]
    nameList2_3: any[]
    nameList2_4: any[]
    dataListOP: any[]
    notInIdList: any[]
  }>({
    sideTitle: '新增染色直通奖',
    showAdd8: false,
    pageLoading: false,
    total: 0,
    dataList: [],
    cfList2: [],
    nameList: [],
    nameList1: [],
    nameList2_1: [],
    nameList2_2: [],
    nameList2_3: [],
    nameList2_4: [],
    dataListOP: [],
    notInIdList: [],
  })

  const editHandler = (record: any) => {
    for (let key in record) {
      objectOP[key] = record[key]
    }
    pageData.sideTitle = '修改染色直通奖'
    pageData.showAdd8 = true
  }
  const addHandler = () => {
    for (var key in objectOP) {
      if (key == 'id') {
        objectOP[key] = null
      } else {
        objectOP[key] = ''
      }
    }
    objectOP.recordDate = dayjs().format('YYYY-MM-DD')
    pageData.sideTitle = '新增染色直通奖'
    pageData.showAdd8 = true
    pageData.cfList2.push({
      jockeyUserCode: '',
      jockeyUserName: '',
      jockeyMoney: '',
      headmanUserCode: '',
      headmanUserName: '',
      headmanCoefficient: 0.2,
      headmanMoney: '',
      dyeworkerUserCode: '',
      dyeworkerUserName: '',
      dyeworkerCoefficient: '',
      dyeworkerMoney: '',
      foremanUserCode: '',
      foremanUserName: '',
      foremanCoefficient: 0.1,
      foremanMoney: '',
      remark: '',
    })
    // console.log(pageData.cfList2, '人生得意须尽欢，莫使金樽空对月');
  }
  const selectHandler = () => {
    doRefresh()
  }

  // 新增事件
  const formRef = ref<FormInstance>()
  const sideOk = () => {
    objectOP.VerifyDonationDetail = outpage(pageData.cfList2, 'jockeyUserCode')
    // formRef.value?.validate().then((err) => {
    //     if (!err) {
    let saveSuccess = true
    for (let i = 0; i < objectOP.VerifyDonationDetail.length; i++) {
      let item = objectOP.VerifyDonationDetail[i]
      if (!item.jockeyMoney || !item.headmanMoney || !item.dyeworkerMoney || !item.foremanMoney) {
        saveSuccess = false
        break
      }
    }
    if (saveSuccess) {
      if (pageData.sideTitle === '新增染色直通奖') {
        post({
          url: '/dwPc/VerifyDonation/insertList',
          data: objectOP,
        }).then((res: any) => {
          if (res.code === 200) {
            formRef.value?.resetFields()
            pageData.showAdd8 = false
            Message.success({
              content: '新增成功',
              duration: 5000,
            })
            doRefresh()
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            })
          }
        })
      } else {
        post({
          url: '/dwPc/VerifyDonation/updateList',
          data: objectOP,
        }).then((res: any) => {
          if (res.code === 200) {
            formRef.value?.resetFields()
            pageData.showAdd8 = false
            Message.success({
              content: '修改成功',
              duration: 5000,
            })
            doRefresh()
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            })
          }
        })
      }
    } else {
      Message.error({
        content: '保存失败，请填写所有奖罚金额！',
        duration: 5000,
      })
    }
    // console.log(pageData.cfList2, '头顶三香，脚踏八仙，天降刑罚，地现增损');

    //     }
    // })
  }

  // 删除事件
  const deleteHandler = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
      Message.error('请先勾选')
      return
    }
    Modal.confirm({
      title: '系统提示',
      content: '确认删除选中的数据?',
      onOk() {
        post({
          url: '/dwPc/VerifyDonation/delete',
          data: gridOption.value.getSelectedRows().map((o: any) => {
            return o.id
          }),
        }).then(({ code, data, message }: any) => {
          if (code === 200) {
            Message.success({
              content: '删除成功',
              duration: 5000,
            })

            pagination.page = 1
            doRefresh()
          } else {
            Message.error({
              content: '删除失败',
              duration: 5000,
            })
          }
        })
      },
    })
  }
  // 查询事件
  const total = ref(0)
  const pagingList1: any = ref(pagingList)
  function doRefresh() {
    pageData.pageLoading = true
    dateForm.page = pagination.page
    dateForm.size = pagination.pageSize
    post({
      url: '/dwPc/VerifyDonation/getPage',
      data: dateForm,
    })
      .then(({ data, code }: any) => {
        if (code === 200) {
          table.handleSuccess(data.list)
          // gridOption.value.setRowData(data.list)
          pageData.dataListOP = data.list
          total.value = data.total
        }
      })
      .catch(console.log)
      .finally(() => {
        pageData.pageLoading = false
      })
  }
  const pagination = usePagination(doRefresh)
  const table = useTable()
  // 子表  删除
  const delRow2 = (record: any) => {
    if (pageData.cfList2.length !== 1) {
      pageData.cfList2 = pageData.cfList2.filter(function (o: any) {
        return o['jockeyUserCode'] !== record['jockeyUserCode']
      })
    } else {
      Message.warning('最后一条数据，不可删除！')
    }
  }
  const changeCf2 = (record: any) => {
    let count1 = 0
    let count2 = 0
    for (let index = 0; index < pageData.cfList2.length; index++) {
      const element = pageData.cfList2[index]
      if (element['jockeyUserCode'] == record['jockeyUserCode']) {
        count1++
      }
      if (element['jockeyUserCode'] == '') {
        count2++
      }
      if (count1 > 1) {
        Message.warning('此成份已被选择过，请重新选择！')
        record['jockeyUserCode'] = ''
        return
      }
    }
    //选择完成份给用户再新增一行
    if (count2 == 0) {
      pageData.cfList2.push({
        jockeyUserCode: '',
        jockeyUserName: '',
        jockeyMoney: '',
        headmanUserCode: '',
        headmanUserName: '',
        headmanCoefficient: 0.2,
        headmanMoney: '',
        dyeworkerUserCode: '',
        dyeworkerUserName: '',
        dyeworkerCoefficient: '',
        dyeworkerMoney: '',
        foremanUserCode: '',
        foremanUserName: '',
        foremanCoefficient: 0.1,
        foremanMoney: '',
        remark: '',
      })
    }
    let ob = ''
    pageData.nameList2_1.map((item: any) => {
      if (item.code == record.jockeyUserCode) {
        return (ob = item.id)
      }
    })
    post({
      url: '/org/hrEmployee/getList ',
      data: { id: ob },
    }).then(({ data, code }: any) => {
      if (code === 200) {
        record.jockeyUserName = data[0].name
        record.workteam = data[0].companyName
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  // 下拉框
  const focusSel = () => {
    selCxAll({ processName: '' })
  }
  const options = ref<any>(pageData.nameList)
  const loading = ref(false)
  const handleSearch = (value: any) => {
    if (value) {
      const ob = { processName: value, deleteState: 0 }
      loading.value = true
      selCxAll(ob)
      options.value = pageData.nameList
      loading.value = false
    } else {
      options.value = []
    }
  }
  function selCxAll(val: any) {
    post({
      url: '/pdm/worksectionWorkprocedure/select ',
      data: val,
    }).then(({ data, code }: any) => {
      if (code === 200) {
        pageData.nameList = data
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }

  // 流转卡号下拉框
  const focusSel1 = () => {
    selCxAll1({ circulatCard: '' })
  }
  const options1 = ref<any>(pageData.nameList1)
  const loading1 = ref(false)
  const handleSearch1 = (value: any) => {
    if (value) {
      const ob = { circulatCard: value, deleteState: 0 }
      loading1.value = true
      selCxAll1(ob)
      options1.value = pageData.nameList1
      loading1.value = false
    } else {
      options1.value = []
    }
  }
  function selCxAll1(val: any) {
    post({
      url: '/dwQms/VerifyClothAbnormal/getFieldValue',
      data: val,
    }).then(({ data, code }: any) => {
      if (code === 200) {
        pageData.nameList1 = data
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  const changeLZ = () => {
    let ob = ''
    pageData.nameList1.map((item: any) => {
      if (item.circulatCard == objectOP.circulatCard) {
        return (ob = item.id)
      }
    })
    // console.log(ob, '冷冷清清凄凄惨惨戚戚');
    post({
      url: '/dwQms/VerifyClothAbnormal/getList',
      data: { id: ob },
    }).then(({ data, code }: any) => {
      if (code === 200) {
        objectOP.recordCode = data[0].customOrderCode
        objectOP.clothCode = data[0].clothCode
        objectOP.brandName = data[0].brandName
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }

  // 操作工工号下拉框
  const focusSel2_1 = () => {
    selCxAll2_1({ code: '' })
  }
  const options2_1 = ref<any>(pageData.nameList2_1)
  const loading2_1 = ref(false)
  const handleSearch2_1 = (value: any) => {
    if (value) {
      const ob = { code: value, deleteState: 0 }
      loading2_1.value = true
      selCxAll2_1(ob)
      options2_1.value = pageData.nameList2_1
      loading2_1.value = false
    } else {
      options2_1.value = []
    }
  }
  function selCxAll2_1(val: any) {
    post({
      url: '/org/hrEmployee/getFieldValue',
      data: val,
    }).then(({ data, code }: any) => {
      if (code === 200) {
        pageData.nameList2_1 = data
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  const focusSel2_2 = () => {
    selCxAll2_2({ code: '' })
  }
  const options2_2 = ref<any>(pageData.nameList2_2)
  const loading2_2 = ref(false)
  const handleSearch2_2 = (value: any) => {
    if (value) {
      const ob = { code: value, deleteState: 0 }
      loading2_2.value = true
      selCxAll2_2(ob)
      options2_2.value = pageData.nameList2_2
      loading2_2.value = false
    } else {
      options2_2.value = []
    }
  }
  function selCxAll2_2(val: any) {
    post({
      url: '/org/hrEmployee/getFieldValue',
      data: val,
    }).then(({ data, code }: any) => {
      if (code === 200) {
        pageData.nameList2_2 = data
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  const change2_2 = (record: any) => {
    let ob = ''
    pageData.nameList2_2.map((item: any) => {
      if (item.code == record.headmanUserCode) {
        return (ob = item.id)
      }
    })
    post({
      url: '/org/hrEmployee/getList ',
      data: { id: ob },
    }).then(({ data, code }: any) => {
      if (code === 200) {
        record.headmanUserName = data[0].name
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  const focusSel2_3 = () => {
    selCxAll2_3({ code: '' })
  }
  const options2_3 = ref<any>(pageData.nameList2_3)
  const loading2_3 = ref(false)
  const handleSearch2_3 = (value: any) => {
    if (value) {
      const ob = { code: value, deleteState: 0 }
      loading2_3.value = true
      selCxAll2_3(ob)
      options2_3.value = pageData.nameList2_3
      loading2_3.value = false
    } else {
      options2_3.value = []
    }
  }
  function selCxAll2_3(val: any) {
    post({
      url: '/org/hrEmployee/getFieldValue',
      data: val,
    }).then(({ data, code }: any) => {
      if (code === 200) {
        pageData.nameList2_3 = data
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  const change2_3 = (record: any) => {
    let ob = ''
    pageData.nameList2_3.map((item: any) => {
      if (item.code == record.dyeworkerUserCode) {
        return (ob = item.id)
      }
    })
    post({
      url: '/org/hrEmployee/getList ',
      data: { id: ob },
    }).then(({ data, code }: any) => {
      if (code === 200) {
        record.dyeworkerUserName = data[0].name
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }

  const focusSel2_4 = () => {
    selCxAll2_4({ code: '' })
  }
  const options2_4 = ref<any>(pageData.nameList2_4)
  const loading2_4 = ref(false)
  const handleSearch2_4 = (value: any) => {
    if (value) {
      const ob = { code: value, deleteState: 0 }
      loading2_4.value = true
      selCxAll2_4(ob)
      options2_4.value = pageData.nameList2_4
      loading2_4.value = false
    } else {
      options2_4.value = []
    }
  }
  function selCxAll2_4(val: any) {
    post({
      url: '/org/hrEmployee/getFieldValue',
      data: val,
    }).then(({ data, code }: any) => {
      if (code === 200) {
        pageData.nameList2_4 = data
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  const change2_4 = (record: any) => {
    let ob = ''
    pageData.nameList2_4.map((item: any) => {
      if (item.code == record.foremanUserCode) {
        return (ob = item.id)
      }
    })
    post({
      url: '/org/hrEmployee/getList ',
      data: { id: ob },
    }).then(({ data, code }: any) => {
      if (code === 200) {
        record.foremanUserName = data[0].name
      } else {
        Message.error({
          content: '查询失败！',
          duration: 5000,
        })
      }
    })
  }
  const change2_1 = (record: any) => {
    if (record.dyeworkerCoefficient == '') {
      Message.error({
        content: '染部师傅系数不能为空！',
        duration: 5000,
      })
      record.headmanMoney = 0
    } else {
      ;(record.headmanMoney = record.jockeyMoney * record.headmanCoefficient),
        (record.dyeworkerMoney = record.jockeyMoney * record.dyeworkerCoefficient),
        (record.foremanMoney = record.jockeyMoney * record.foremanCoefficient)
    }
  }
  // 过滤必填数据为空的行数据事件
  const outpage = (item: any, fieldName: any) => {
    let data: any = []
    // console.log(item, '我知道那些夏天就像青春一样回不来');
    if (item != undefined) {
      item.filter((o: any) => {
        if (o[fieldName] == '' || o[fieldName] == null || o[fieldName] == undefined) {
        } else {
          data.push(o)
        }
      })
      return data
    }
  }
  // 导出
  const exports = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
      Message.error('请先勾选')
      return
    } else {
      EXELTABLE(tc, gridOption.value.getSelectedRows(), '中检质量乐捐登记')
    }
  }
</script>
<script lang="ts">
  export default {
    name: 'ZhongjianQualityDonationDemo',
  }
</script>
<style scoped lang="less">
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.ag-header-group-text) {
    text-align: center;
  }

  :deep(.ag-header-group-cell-label, .ag-header-cell-label) {
    justify-content: center !important;
  }

  :deep( .ag-header-cell) ,:deep( .ag-header-group-cell) {
    border-right: 1px solid #dde2eb !important;
  }
</style>
